<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 50%;
            /*相邻边框线条合并*/
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid gray;
        }
    </style>
    <script>
        function load() {
            document.forms['frm'].btnadd.addEventListener('click',elmentAdd);
        }
        function elmentAdd() {
            //校验
            if (document.forms['frm'].clazz.value.trim()==''
            || document.forms['frm'].name.value.trim()==''
            || document.forms['frm'].chinese.value.trim()==''){
                alert("请输入值")
                return
            }
            let tr=document.createElement("tr");
            let tdClazz=document.createElement("td");
            let tdName=document.createElement("td");
            let tdChinese=document.createElement("td");
            let tdOption=document.createElement("td");
            let btnRemove=document.createElement("button");
            btnRemove.innerText="删除";
            btnRemove.onclick=remove;
            tdOption.appendChild(btnRemove);
            tdClazz.innerText = document.forms['frm'].clazz.value;
            tdName.innerText = document.forms['frm'].name.value;
            tdChinese.innerText = document.forms['frm'].chinese.value;
            tr.appendChild(tdClazz)
            tr.appendChild(tdName)
            tr.appendChild(tdChinese)
            tr.appendChild(tdOption)
            document.getElementById("tableScore").appendChild(tr)
            //重置
            document.forms['frm'].reset();
        }
        function remove() {
            //alert("remove")
            let tr=event.srcElement.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
    </script>
</head>
<body onload="load()">
<form name="frm">
    班级:<input name="clazz"/>
    姓名:<input name="name"/>
    语文:<input name="chinese"/>
    <button type="button" name="btnadd">增加</button>
</form>
<table id="tableScore">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>语文</th>
        <th>操作</th>
    </tr>
</table>
</body>
</html>